<template>
  <div class="fuwenben">
    <div id="editor2">

    </div>
  </div>
</template>

<script>
  import * as qiniu from 'qiniu-js'
  import axios from "axios";
  import E from 'wangeditor'
  export default {
    name: "fuwenben",
    props:['description'],
    data() {
      return {

      }
    },
    created() {

    },
    mounted() {
      var that = this
      var editor = new E('#editor2');
      editor.config.showLinkImg = false
      editor.config.menus = [
                  // 'head',
                  'bold',
                  'fontSize',
                  // 'fontName',
                  // 'italic',
                  'underline',
                  // 'strikeThrough',
                  // 'indent',
                  // 'lineHeight',
                  'foreColor',
                  // 'backColor',
                  // 'link',
                  // 'list',
                  // 'todo',
                  // 'justify',
                  // 'quote',
                  // 'emoticon',
                  'image',
                  // 'video',
                  // 'table',
                  // 'code',
                  // 'splitLine',
                  // 'undo',
                  // 'redo',
      ]
      editor.config.onchange = function(html) {
        // that.all.description = html
        that.$emit('fuwenbenfanhui',html)
      }
      editor.config.customUploadImg = function(files, insert) {

        let wenjianjia = 'img'
        let name = new Date().getTime()

        if(process.env.NODE_ENV === 'development'){
          wenjianjia = 'test-img'
        }
        if(window.location.href.includes('storep.91haoka.cn') && that.apis == ''){
          wenjianjia = 'img'
        }
        if(window.location.href.includes('store.91haoka.cn') && that.apis == ''){
          wenjianjia = 'test-img'
        }
        let type = files[0].type.split('/')

        axios.post(`${that.apis}/api/qiniu/token`,{bucket:'gthshopstore',cloud:`${wenjianjia}/${name}.${type[1]}`})
          .then(response => {

            if(response.data.msg.code == 0){
              const observer = {
                next(res){

                },
                error(err){

                },
                complete(res){
                  insert('https://file.91haoka.cn/' + res.key)
                }
              }
              const options = {
                quality: 1,
                noCompressIfLarger: true,
                maxWidth: 1920
              }
              qiniu.compressImage(files[0], options).then(data => {
                const observable = qiniu.upload(data.dist, `${wenjianjia}/${name}.${type[1]}`, response.data.data)
                const subscription = observable.subscribe(observer) // 上传开始
              })
            }else{
              that.$message.error(response.data.msg.info);
            }
          });

        // var formData = new FormData();
        // formData.append("file", files[0]);
        // formData.append("type", 'pic');
        // axios.post(`${that.apis}/api/system/upload`, formData)
        //   .then(response => {
        //     if (response.data.msg.code == 0) {
        //       insert(response.data.data)
        //     } else {
        //       that.$message.error(response.data.msg.info);
        //     }
        //   })

      }
      editor.create();

      editor.txt.html(this.description)
    },
    methods: {

    }
  }
</script>

<style scoped lang="less">
  .fuwenben {

    #editor2{
      width: 1050px;
      img{ max-width: 100%;}

      /deep/ .w-e-toolbar{ z-index: 11 !important;}
      /deep/ .w-e-text-container{ z-index: 10 !important; min-height: 300px; height: auto !important;}
    }
  }
</style>
